<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
      integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
      crossorigin="anonymous"
    />
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
    ></script>
  </head>
  <style>
    * {
      margin: 0 auto;
      text-align: center;
    }

    th {
      text-align: center;
    }
    thead tr {
      background: #ccc;
    }
  </style>
  <body>
    <h1>真划算</h1>
    <table class="table table-bordered" style="width: 50%">
      <thead>
        <tr>
          <th>商品</th>
          <th>单价（元）</th>
          <th>颜色</th>
          <th>库存</th>
          <th>好评率</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="goodlist">
        <tr>
          <td>苹果</td>
          <td>10</td>
          <td>red</td>
          <td>100</td>
          <td>99%</td>
          <td>
            <button class="btn btn-default" style="height: 30px">
              加入购物车
            </button>
          </td>
        </tr>
        <tr>
          <td>香蕉</td>
          <td>15</td>
          <td>黄色</td>
          <td>100</td>
          <td>99%</td>
          <td>
            <button class="btn btn-default" style="height: 30px">
              加入购物车
            </button>
          </td>
        </tr>
        <tr>
          <td>哈密瓜</td>
          <td>20</td>
          <td>绿色</td>
          <td>100</td>
          <td>99%</td>
          <td>
            <button class="btn btn-default" style="height: 30px">
              加入购物车
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <h1>购物车</h1>
    <table class="table table-bordered" style="width: 50%">
      <thead>
        <tr>
          <th>商品</th>
          <th>单价（元）</th>
          <th>数量</th>
          <th>金额</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="buycard"></tbody>
    </table>
  </body>
  <script>
    $(function () {
      $('button:contains("加入购物车")').click(function () {
        var goods = $(this).parent().siblings()
        var goodsName = $(goods[0]).html(),
          price = $(goods[1]).html()
        $(goods[3]).html($(goods[3]).html() - 1)
        var tdObj = $(`#buycard td:contains("${goodsName}")`)

        if (tdObj.length > 0) {
          var spanObj = tdObj.next().next().children('span')
          spanObj.html(+spanObj.html() + 1)
          tdObj
            .next()
            .next()
            .next()
            .html(price * +spanObj.html())
        } else {
          var htmlTr = `<tr>
                            <td>${goodsName}</td>
                            <td>${price}</td>
                            <td><button class='jia' name='${goodsName}'>+</button><span>1</span><button name='${goodsName}' class='jian'>-</button></td>
                            <td>${price}</td>
                            <td><button style="height: 30px;">删除</button></td>
                        </tr>`
          $('#buycard').append(htmlTr)
          $('.jia').unbind('click')
          $('.jia').click(function () {
            var num = $(this).next().html()
            $(this)
              .next()
              .html(+num + 1)
            var goodsName = $(this).attr('name')
            var stock = $(`#goodlist td:contains("${goodsName}")`)
              .next()
              .next()
              .next()
            stock.html(stock.html() - 1)
            var price = $(this).parent().prev().html()
            $(this)
              .parent()
              .next()
              .html((+num + 1) * price)
          })
          $('.jian').unbind('click')
          $('.jian').click(function () {
            var num = $(this).prev().html()
            $(this)
              .prev()
              .html(+num - 1)
            var goodsName = $(this).attr('name')
            var stock = $(`#goodlist td:contains("${goodsName}")`)
              .next()
              .next()
              .next()
            stock.html(+stock.html() + 1)

            var price = $(this).parent().prev().html()
            $(this)
              .parent()
              .next()
              .html((+num - 1) * price)
            if (num == 1) {
              $(this).parent().parent().remove()
              return
            }
          })
          $('button:contains("删除")').unbind('click')
          $('button:contains("删除")').bind('click', function () {
            var num = $(this).parent().siblings().eq(2).children('span').html()
            var goodsName = $(this).parent().siblings().eq(0).html()
            var stock = $(`#goodlist td:contains("${goodsName}")`)
              .next()
              .next()
              .next()
            stock.html(+stock.html() + +num)
            $(this).parent().parent().remove()
          })
        }
      })
    })
    //总计
  </script>
</html>
